{% extends 'base.html' %}
{% block title %}
    课程页面
{% endblock %}

{% block header %}
    <link rel="stylesheet" href="../static/css/course_index.css">
{% endblock %}
{% block main %}
    <div class="main">
        <div class="course-nav">
            <div class="nav-container">
                <h3 class="title">在线课堂</h3>
                <ul class="nav-list">
                    <li class="active"><a href="#">最新课堂</a></li>
                    <li><a href="#">投资人说</a></li>
                    <li><a href="#">明星案例</a></li>
                    <li><a href="#">创业知识</a></li>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <ul class="course-list">
                <li>
                    <a href="#">
                        <div class="thumbnail"><img src="http://static-image.xfz.cn/1513577022_550.png"></div>
                        <div class="course-info">
                            <p class="title-cu">对赌是什么</p>
                            <p class="author-cu">小邸出版社</p>
                            <p class="price-cu"><span class="free">免费</span></p>
                        </div>
                    </a>
                </li>
                {% for course in courses %}
                    <li>
                        <a href="{% url 'course:course_detail' course_id=course.pk %}">
                        <div class="thumbnail"><img src="{{ course.cover_url }}"></div>
                        <div class="course-info">
                            <p class="title-cu">{{ course.title }}</p>
                            <p class="author-cu">{{ course.teacher.username }}</p>
                            {% if course.price > 0%}
                                <p class="price-cu"><span class="pay">￥{{ course.price }}</span></p>
                            {% else %}
                                 <p class="price-cu"><span class="free">免费</span></p>
                            {% endif %} 

                        </div>
                    </a>
                    </li>

                {% endfor %}

            </ul>
        </div>
    </div>
{% endblock %}